<template>
  <div class="charge-amount">
    <div class="container">
      <div class="overview">
        <div class="title">会员余额(¥)</div>
        <div class="card">
          <!-- cardUseRangeFlag : 1多站通用 2单站 -->
          <div v-if="cardList.length == 0 && cardUseRangeFlag === '1'">
            所在油站未启动电子卡功能
          </div>
          <div v-if="cardTypeList.length == 0 && cardUseRangeFlag === '2'">
            所在油站未启动电子卡功能
          </div>
          <!-- 单站使用 -->
          <template v-if="cardUseRangeFlag === '1'">
            <div v-for="ele in cardList" :key="ele.id">
              {{ cardOilsTypeText[ele.cardOilsType] }}：
              <span>{{ ele.totalAmt | toFixed }}</span>
            </div>
          </template>
          <!-- 多站通用 -->
          <template v-if="cardUseRangeFlag === '2'">
            <div v-for="(ele, index) in cardTypeList" :key="index">
              {{ cardOilsTypeText[ele.cardOilsType] }}：
              <span>{{ ele.totalAmt | toFixed }}</span>
            </div>
          </template>
        </div>
        <div class="pay">
          <span class="icon"></span>
          <router-link :to="'/charge/?enterpriseId=' + enterpriseId" tag="span" class="text" >充值</router-link>
        </div>
      </div>
      <div class="detail">
        <div class="title">金额明细</div>
        <div class="part">
          <div :class="[type === 0 ? 'active' : '']" @click="selectType('', 0)">全部</div>
          <div :class="[type === 1 ? 'active' : '']" @click="selectType('1', 1)">充值</div>
          <div :class="[type === 2 ? 'active' : '']" @click="selectType('0', 2)">支出</div>
        </div>
      </div>
      <div class="content">
        <div v-if="showList.length === 0" class="no-img">
          <div></div>
          <span>无记录</span>
        </div>
        <template v-else>
          <div class="ele" v-for="(item, index) in showList" :key="index">
            <div class="title">
              <span class="text">
                {{ cardOilsTypeText[item.cardOilsType] }}
              </span>
              <span class="amount" v-if="item.usageType == '-'">
                {{ item.usageType }} {{ +item.amt | toFixed }}
              </span>
              <span class="amount" v-else>
                {{ item.usageType }}
                {{ (+item.amt + (+item.presentAmt || 0)).toFixed(2) }}
                 <!-- {{(item.amt? +item.presentAmt + +item.amt: +item.presentAmt) | toFixed}} -->
              </span>
            </div>
            <div class="item">
              <span class="text">
                {{ item.usageType == "+" ? "充值金额" : "消费金额" }}
              </span>
              <span class="amount">
                <!-- 消费返额的订单是没有amt字段的 -->
                {{(item.amt ? item.amt : 0) | toFixed }}
              </span>
            </div>
            <div class="item" v-if="item.usageType === '+'">
              <span class="text">赠送金额</span>
              <span class="amount">
                {{ item.presentAmt ? +item.presentAmt : 0 | toFixed }}
              </span>
            </div>
            <div class="item">
              <span class="text">
                {{ item.usageType == "+" ? "充值时间" : "消费时间" }}
              </span>
              <span class="amount">{{ item.createTime }}</span>
            </div>
          </div>
        </template>
        <template>
          <div></div>
        </template>
        <van-pagination v-model="queryForm.pageNum" :total-items="total" :items-per-page="queryForm.pageSize" mode="simple" @change="getChargeList" v-if="total > queryForm.pageSize">
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import ProductList from "@/components/ProductList";
import moment from "moment";
import { mapGetters } from "vuex";
import Vue from "vue";
import { Pagination, Icon, ActionSheet } from "vant";
Vue.use(Icon);
Vue.use(Pagination);

export default {
  head() {
    return {
      title: "电子卡明细"
    };
  },
  data() {
    return {
      total: 0,
      allList: [],
      showList: [],
      type: 0, //0全部 1充值 2支出
      gasolineAmount: 0,
      dieselAmount: 0,
      cardOilsTypeText: ["通用卡", "汽油卡", "柴油卡", "LNG卡", "CNG卡"],
      cardList: [],
      cardTypeList: [],
      cardUseRangeFlag: "",
      queryForm: {
        pageNum: 1, //第几页
        pageSize: 10, // 容量
        enterpriseId: undefined,
        mobilePhone: undefined,
        usageType: "1"
        // cardOilsType:undefined
      }
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    }),
    chargeList() {
      return this.allList.filter(ele => {
        return ele.usageType === "+";
      });
    },
    payList() {
      return this.allList.filter(ele => {
        return ele.usageType === "-";
      });
    }
  },
  filters: {
    toFixed: function(value) {
      return (+value).toFixed(2);
    }
  },
  components: {
    ProductList
  },
  created() {
    this.init();
    this.getChargeList();
    // console.log("user.info", this.userInfo);
  },
  methods: {
    async getChargeList() {
      this.queryForm.mobilePhone = this.phone;
      this.queryForm.enterpriseId = this.enterpriseId;
      try {
        const amountData = await this.$axios.$get("/getCardRecordListNew", {
          params: this.queryForm
        });
        if (amountData.retCode !== 0) {
          throw new Error(amountData.message);
        }
        this.showList = amountData.data.list;
        this.total = amountData.data.total;
      } catch (error) {
        alert(error);
      }
    },
    async init() {
      this.$axios
        .$get("/getElectronicCardList", {
          params: {
            mobilePhone: this.phone,
            enterpriseId: this.enterpriseId
          }
        })
        .then(res => {
          if (res.retCode === 0) {
            this.cardUseRangeFlag = res.data.cardUseRangeFlag;
            if (res.data.cardUseRangeFlag === "1") {
              this.cardList = res.data.cardList;
            }
            if (res.data.cardUseRangeFlag === "2") {
              this.cardTypeList = res.data.cardTypeList;
            }
          }
        })
        .catch(e => {});
    },
    selectType(usageType, type) {
      this.queryForm.usageType = usageType;
      this.queryForm.pageNum = 1;
      this.type = type;

      this.getChargeList();
      // const typeArr = ["allList", "chargeList", "payList"];
      // this.showList = this[typeArr[type]];
    }
  }
};
</script>

<style>
.charge-amount {
  width: 100%;
  height: 16.24rem;
  background: #ffffff;
}

.charge-amount .container {
  width: 6.9rem;
  margin: 0 auto;
}

.charge-amount .container .overview {
  width: 6.9rem;
  height: 2.8rem;
  background: url("../../../static/point/4_b01_bj@2x.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.charge-amount .container .overview .title {
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.4rem;
  position: absolute;
  left: 0.6rem;
  top: 0.3rem;
}

.charge-amount .container .overview > .card {
  position: absolute;
  left: 0.3rem;
  top: 0.9rem;
  width: 6.3rem;
  height: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
}

.charge-amount .container .overview > .card div {
  font-size: 0.28rem;
  color: #ffffff;
  font-weight: 500;
}

.charge-amount .container .overview > .card div span {
  font-weight: 600;
  font-size: 0.4rem;
}

.charge-amount .container .overview .pay {
  width: 1.4rem;
  height: 0.5rem;
  border-radius: 0.39rem;
  border: 0.02rem solid #ffffff;
  position: absolute;
  top: 0.25rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.charge-amount .container .overview .pay .icon {
  width: 0.3rem;
  height: 0.3rem;
  background: #ffffff;
  display: inline-block;
  background: url("../../../static/point/jinbi.png") no-repeat;
  background-size: cover;
}

.charge-amount .container .overview .pay .text {
  display: inline-block;
  height: 0.6rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.6rem;
  margin-left: 0.2rem;
}

.charge-amount .container .detail {
  width: 100%;
  height: 1.17rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.01rem solid #e0e0e0;
}

.charge-amount .container .detail .title {
  height: 1.17rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 1.17rem;
}

.charge-amount .container .detail .part {
  display: flex;
  width: 3.2rem;
  height: 1.13rem;
  justify-content: space-between;
  align-items: center;
}

.charge-amount .container .detail .part div {
  height: 1.13rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 1.13rem;
}

.charge-amount .container .detail .part .active {
  height: 1.13rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  border-bottom: 0.06rem solid #db9d28;
}

.charge-amount .container .content {
  width: 100%;
}

.charge-amount .container .content .no-img {
  width: 100%;
  height: 60vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.charge-amount .container .content .no-img div {
  width: 2.29rem;
  height: 1.87rem;
  background: url("../../../static/common/wu@2x.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.charge-amount .container .content .no-img span {
  width: 2.29rem;
  height: 0.4rem;
  font-size: 0.28rem;
  font-weight: 500;
  color: #aaaaaa;
  line-height: 0.4rem;
  text-align: center;
}

.charge-amount .container .content .ele {
  height: 2.7rem;
  border-bottom: 0.01rem solid #e0e0e0;
  padding: 0.3rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.charge-amount .container .content .ele .title {
  width: 100%;
  height: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #111111;
  line-height: 0.45rem;
  display: flex;
  justify-content: space-between;
}

.charge-amount .container .content .ele .title .text {
  display: inline-block;
  height: 0.45rem;
  font-weight: 500;
  color: #111111;
}

.charge-amount .container .content .ele .title .amount {
  display: inline-block;
  height: 0.45rem;
  font-weight: 500;
  color: #db9d28;
}

.charge-amount .container .content .ele .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.15rem;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.4rem;
}

.charge-amount .container .content .ele .item .text {
  display: inline-block;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.4rem;
}

.charge-amount .container .content .ele .item .amount {
  display: inline-block;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 0.4rem;
}
</style>
